//添加学生照片
var oBtnload=document.getElementById('btn-load');
var oFile=document.getElementById('input-load');
oBtnload.onclick=function () {
    var  oFReader=new FileReader();
    oFReader.readAsDataURL(oFile.files[0]);
    oFReader.onloadend=function () {
        var src=event.target.result;
        $('#div1>img').attr('src',src)
    };
};
//全选按钮点击事件
$('.container-fluid>button:nth-of-type(1)').click(function () {
    var aTr=$('input[type=checkbox]');
    aTr.prop('checked',true)
});


//反选按钮点击事件
$('.container-fluid>button:nth-of-type(2)').click(function () {
    var aTr=$('input[type=checkbox]');
    aTr.each(function () {
        if($(this).prop('checked')){
            $(this).prop('checked',false)
        }else{
            $(this).prop('checked',true)
        }
    })
});
//删除按钮点击事件  删除学生信息
$('.container-fluid>button:nth-of-type(3)').click(function () {
     aTr=$('input[type=checkbox]');
    //先判断有没有勾选
    var haveOne=false;
    aTr.each(function () {
        if($(this).prop('checked')){
            haveOne=true;
        }
    });
    if(haveOne){
        $('#myModal').modal('show');
    }else{
        $('.alert-warning').show();
        //点击小弹框的x时弹框隐藏
        $('.alert-warning>button').click(function () {
            $('.alert-warning').hide();
        });
    }
});
//点击删除弹框的确认按钮
var oBtnDel=$('.btn-del');
oBtnDel.click(function () {
    aTr.each(function () {
        if ($(this).prop('checked')) {
            var n=$(this).parents('tr').attr('data-index');
            for(var i=0;i<arr.length;i++){
                if(arr[i].stu_index==n){
                    arr.splice(i,1);
                }
            }
            getPageNum();
            getPageData(1);
        }

    });
    //弹出框隐藏
    $('#myModal').modal('hide');
});
//点击操作栏内的删除先弹框
    $('.content-table').on('click','.fa-trash',function () {
        $('#myModal3').modal('show');
        var n=$(this).parents('tr').attr('data-index');
        //点击操作栏内的删除
        $('.btn-del2').click(function () {
            for(var i=0;i<arr.length;i++){
                if(arr[i].stu_index==n){
                    arr.splice(i,1);
                }
            }
            getPageNum();
            getPageData(1);
            $('#myModal3').modal('hide')
        });
});

var l;    //定位点击修改的该条数据位置

//点击修改学生信息弹出修改框
$('.content-table').on('click','.fa-pencil-square-o',function () {
     l=$(this).parents('tr').attr('data-index');
   for(i=0;i<arr.length;i++){
       if(arr[i].stu_index==l){
           $('#div2>img').attr('src',arr[i].photo);
           $('#name2').val(arr[i].name);
           if(arr[i].sex=='男'){
               $('#boy2').attr('checked','checked');
           }else{
               $('#girl2').attr('checked','checked');
           }
           $('#callName3>option').removeAttr('selected');
           switch (arr[i].callName){
               case '1':
                   $('#callName3>option').eq(0).attr('selected','selected');
                   break;
               case '2':
                   $('#callName3>option').eq(1).attr('selected','selected');
                   break;
               case '3':
                   $('#callName3>option').eq(2).attr('selected','selected');
                   break;
               case '4':
                   $('#callName3>option').eq(3).attr('selected','selected');
                   break;
           }
           $('#callName4>option').removeAttr('selected');
           switch (arr[i].callName2){
               case '1':
                   $('#callName4>option').eq(0).attr('selected','selected');
                   break;
               case '2':
                   $('#callName4>option').eq(1).attr('selected','selected');
                   break;
               case '3':
                   $('#callName4>option').eq(2).attr('selected','selected');
                   break;
               case '4':
                   $('#callName4>option').eq(3).attr('selected','selected');
                   break;
           }
           $('#class2').val(arr[i].class);
           $('#birth2').val(arr[i].birth);
           $('#address2').val(arr[i].address);
           $('#time2').val(arr[i].date);
           $('#family_name3').val(arr[i].parent1);
           $('#family_tel3').val(arr[i].parent1_tel);
           $('#family_job3').val(arr[i].parent1_job);
           $('#family_name4').val(arr[i].parent2);
           $('#family_tel4').val(arr[i].parent2_tel);
           $('#family_job4').val(arr[i].parent2_job);
       }
   }
    $('#myModal4').modal('show');

});
//点击保存修改后的事件
$('.btn-change').click(function () {
    aInput2.each(function () {
        if(!test($(this))){
            flag2=false;
        }
        return true;
    });
    if(flag2){
        var oDate=new Date();
        var year=oDate.getFullYear();
        var birthD=year-($('#birth2').val().split('.'))[0];//由填写的出生日期计算年龄
        var sex='男';
        if($('#girl2').prop('checked')){sex='女'}
        var newStu={
            name:$('#name2').val(),
            photo:$('#div2>img').attr('src'),//学生照片
            birth:$('#birth2').val(), //出生日期
            age:birthD,  //年龄
            sex:sex,
            class:$('#class2').val(),
            address:$('#address2').val(),//家庭住址
            parent1:$('#family_name3').val(),
            callName:$('#callName3').val(),
            parent1_tel:$('#family_tel3').val(),
            parent1_job:$('#family_job3').val(),
            parent2:$('#family_name4').val(),
            callName2:$('#callName4').val(),
            parent2_tel:$('#family_tel4').val(),
            parent2_job:$('#family_job4').val(),
            date:$('#time2').val(),//入学时间
            stu_index:l,
        };
        for(i=0;i<arr.length;i++){
            if(arr[i].stu_index==l){
                arr.splice(i,1,newStu)
            }
        }
        getPageData(1);
        $('#myModal4').modal('hide');
        $('#myModal5').on('show.bs.modal', function () {
            var content=$('#myModal5 .modal-body');
            content.html(' <i class="fa fa-check-circle"></i>\n' +
                '<p>修改成功</p>');
            content.children('i').css('color','#01BF66');
            $('#myModal5 .modal-footer button').css({
                'background-color': '#5cb85c',
                'border-color': '#4cae4c'});
        });
        $('#myModal5').modal('show');
    }
});

//修改弹框内的添加学生照片
var oBtnload2=document.getElementById('btn-load2');
var oFile2=document.getElementById('input-load2');
oBtnload2.onclick=function () {
    var  oFReader=new FileReader();
    oFReader.readAsDataURL(oFile2.files[0]);
    oFReader.onloadend=function () {
        var src=event.target.result;
        $('#div2>img').attr('src',src)
    };
};

//表格里序号排列函数

function listN() {
    var aListN=$('.table-tr>td:nth-of-type(2)');
    aListN.each(function () {
        $(this).text($(this).parent().index())
    })
}

var arr=JSON.parse(localStorage.getItem('stuInform'))||[]; //存放学生信息的数组
var stu_index=JSON.parse(localStorage.getItem('stu_index')) || 0;//代表数据在数组内位置的数据
var res=[]; //最终渲染的数据
var oPageBox=$('.pagination');  //页码的nav
var flag1=true;  //添加时点保存时判断所有input输入内容是否符合要求
var flag2=true;  //修改时点保存时判断所有input输入内容是否符合要求
var aInput1=$('#myModal2 input[type=text]');//添加弹框中的所有input
var aInput2=$('#myModal4 input[type=text]');//修改弹框中的所有input

// 获取localstorage的学生信息并创建表格插入页面中的函数
function loadDate () {
    //删除表格内容的函数
    $('.table-header').nextAll('tr').remove();
    //遍历创建元素并放入信息
    res.forEach(function (i) {
        var otd=$('<tr class="table-tr" data-index="'+i['stu_index']+'">' +
            '<td class="content-th list-th ">' +
            '<input type="checkbox" >' +
            '</td>' +
            '<td class="content-th"></td>' +
            '<td class="content-th">'+i['name']+'</td>' +
            '<td class="content-th width-th">'+i['class']+'</td>' +
            '<td class="content-th width-th">'+i['sex']+'</td>' +
            '<td class="content-th width-th">'+i['age']+'</td>' +
            '<td class="content-th width-th">'+i['parent1']+'</td>' +
            '<td class="content-th width-th">'+i['parent1_tel']+'</td>' +
            '<td class="content-th width-th">'+i['parent2']+'</td>' +
            '<td class="content-th">'+i['parent2_tel']+'</td>' +
            '<td class="content-th">'+i['date']+'</td>' +
            '<td class="content-th last-th">' +
            '<span class="content-button"><i class="fa fa-pencil-square-o"></i></span>' +
            '<span class="content-button"><i class="fa fa-trash"></i></span>' +
            '</td>' +
            '<td class="content-th time-th">' +
            '<input type="text" class="th-input">' +
            '</td>' +
            '</tr>');
        //将元素插入入表格
        $('.content-table').append(otd);
        //重新排序
        listN();
    });
    localStorage.setItem('stuInform',JSON.stringify(arr));
    localStorage.setItem('stu_index',stu_index);
};
loadDate();

//点击添加  弹出添加信息框
$('.btn-add').click(function () {
    $('#myModal2').modal('show')
});
//添加学生信息
$('.btn-save').click(function () {
    aInput1.each(function () {
        if(!test($(this))){
            flag1=false;
        }
        return true;
    });
    if(flag1){
        stu_index++;
        var oDate=new Date();
        var year=oDate.getFullYear();
        var birthD=year-($('#birth').val().split('.'))[0];//由填写的出生日期计算年龄
        var sex='男';
        if($('#girl').prop('checked')){sex='女'}
        var newStu={
            name:$('#name').val(),
            photo:$('#div1>img').attr('src'),//学生照片
            birth:$('#birth').val(), //出生日期
            age:birthD,  //年龄
            sex:sex,
            class:$('#class').val(),
            address:$('#address').val(),//家庭住址
            parent1:$('#family_name').val(),
            callName:$('#callName1').val(),
            parent1_tel:$('#family_tel').val(),
            parent1_job:$('#family_job').val(),
            parent2:$('#family_name2').val(),
            callName2:$('#callName2').val(),
            parent2_tel:$('#family_tel2').val(),
            parent2_job:$('#family_job2').val(),
            date:$('#time').val(),//入学时间
            stu_index:stu_index,
        };
        arr.unshift(newStu);//将信息存入数组
        getPageNum();
        getPageData(1);
        $('#myModal2').modal('hide');
        $('#myModal2 input').val('');
        $('#div1>img').attr('src','../images/wwq-img/student-photo.jpg');
        $('#myModal5').on('show.bs.modal', function () {
            var content=$('#myModal5 .modal-body');
            content.html(' <i class="fa fa-check-circle"></i>\n' +
                '<p>保存成功</p>');
            content.children('i').css('color','#01BF66');
            $('#myModal5 .modal-footer button').css({
                'background-color': '#5cb85c',
                'border-color': '#4cae4c'});
        });
        $('#myModal5').modal('show');
    }
});

//添加学生信息的表单验证正则表达式
var reg={
    name:/^[\u4e00-\u9fa5]{2,5}$/,
    birth:/^\d{4}(\.)\d{2}(\.)\d{2}$/,
    class:/^\d{2}[\u4e00-\u9fa5]{3,5}$/,
    address:/^[a-z0-9A-Z\u4e00-\u9fa5]{2,25}$/,
    callName:/^[\u4e00-\u9fa5]{2,5}$/,
    tel1:/^1[356789]\d{9}$/,
    callName2:/^[\u4e00-\u9fa5]{2,5}$/,
    tel2:/^1[356789]\d{9}$/,
    address2:/^[a-z0-9A-Z\u4e00-\u9fa5]{2,25}$/,
    address3:/^[a-z0-9A-Z\u4e00-\u9fa5]{2,25}$/,
};


//判断输入框内内容是否符合对应正则式要求的函数
function test(obj) {
    var str= obj.val();
    if(!str.trim()){
       obj.attr('placeholder','不能为空');
        obj.css('border','red solid 1px');
        return false;
    }
    if (reg[obj.attr('data-index')].test(str)) {
        obj.css('border','');
        return true;
    } else {
        obj.css('border','red solid 1px');
        return false;
    }
};
//添加学生信息表达每个input失去焦点时验证
aInput1.each(function () {
    $(this).blur(function () {
        test($(this));
    })
});

//修改学生信息弹框中每个input失去焦点时验证
aInput2.each(function () {
    $(this).blur(function () {
        test($(this));
    })
});
//获取有多少页码
function getPageNum() {
    var pageNum=Math.ceil(arr.length/6); //根据数据得出页数

    oPageBox.html('');

    for(var i=0;i<pageNum;i++){

        var oLi=$('<li><a href="javascript:;" class="nav-ul">'+(i+1)+'</a></li>');

        oPageBox.append(oLi);

        if(i==0){
            oLi.addClass('active');
        }
    }
};
getPageNum();
//获取某一页的数据
function getPageData(index) {
    res=arr.slice((index-1)*6,6*index);
    loadDate();
}
getPageData(1);
//点击页码 获取当页的数据
oPageBox.on('click','li',function () {
    var n=$(this).index();
    getPageData(n+1);

    $(this).addClass('active').siblings('li').removeClass('active');

});

//搜索功能

var searchInput=$('.input-search');
var search=$('.fa-search');
search.on('click',searchInformation);   //点击搜索按钮执行搜索函数


searchInput.keyup(function (event) {
    //搜索框内点击删除键，当搜索框内容未空时将表格内数据初始化
    if(event.keyCode==8){
        if(searchInput.val()==''){
            getPageNum();
            getPageData(1);
        }
    };
    //搜索框内点击回车键，执行搜索函数
    if(event.keyCode==13){
        searchInformation();
    }
});
//搜索函数 （判断搜索框内是否为空，为空弹框提示，不为空进行搜索，搜索到了进行渲染，没搜到，弹框提示）
function searchInformation () {
    var str=searchInput.val();
    var reg= /^[\s]*$/;  //判断输入是否未空格的正则
    var find=false;   //判断有没有找到
    if(reg.test(str)){
        $('#myModal5').on('show.bs.modal', function () {
            var content=$('#myModal5 .modal-body');
            content.html(' <i class="fa fa-exclamation-circle"></i>\n' +
                '<p>输入不能为空</p>');
            content.children('i').css('color','#D9534F');
            $('#myModal5 .modal-footer button').css({
                'background-color': '#d9534f',
                'border-color': '#d43f3a'});
        });
        $('#myModal5').modal('show');
    }else{
        //删除表格内容的函数
        $('.table-header').nextAll('tr').remove();
        //删除页码
        oPageBox.html('');

        for(i=0;i<arr.length;i++){
            var data=arr[i].name+arr[i].parent1+arr[i].parent2;
            if(data.indexOf(str)!=-1){
                find=true;  //找到了
                //遍历创建元素并放入信息
                var otd=$('<tr class="table-tr" data-index="'+arr[i]['stu_index']+'">' +
                    '<td class="content-th list-th ">' +
                    '<input type="checkbox" >' +
                    '</td>' +
                    '<td class="content-th"></td>' +
                    '<td class="content-th">'+arr[i]['name']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['class']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['sex']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['age']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['parent1']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['parent1_tel']+'</td>' +
                    '<td class="content-th width-th">'+arr[i]['parent2']+'</td>' +
                    '<td class="content-th">'+arr[i]['parent2_tel']+'</td>' +
                    '<td class="content-th">'+arr[i]['date']+'</td>' +
                    '<td class="content-th last-th">' +
                    '<span class="content-button"><i class="fa fa-pencil-square-o"></i></span>' +
                    '<span class="content-button"><i class="fa fa-trash"></i></span>' +
                    '</td>' +
                    '<td class="content-th time-th">' +
                    '<input type="text" class="th-input">' +
                    '</td>' +
                    '</tr>');
                //将元素插入入表格
                $('.content-table').append(otd);
                //重新排序
                listN();
            }
            continue;
        }
        if(find==false){
            $('#myModal5').on('show.bs.modal', function () {
                var content=$('#myModal5 .modal-body');
                content.html(' <i class="fa fa-exclamation-circle"></i>\n' +
                    '<p>未找到相关信息</p>');
                content.children('i').css('color','#D9534F');
                $('#myModal5 .modal-footer button').css({
                    'background-color': '#d9534f',
                    'border-color': '#d43f3a'});
            });
            $('#myModal5').modal('show');
        }
    }
};